import React, {Component} from 'react'
import {
  Player,
  ControlBar,
  PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
  ReplayControl, // 后退按钮
  ForwardControl,  // 前进按钮
  CurrentTimeDisplay,
  TimeDivider,
  PlaybackRateMenuButton,  // 倍速播放选项
  VolumeMenuButton
} from 'video-react';
import "video-react/dist/video-react.css";

class Video extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { url } = this.props
    return (
      <div style={{height: '100%'}}>
        <Player
          className={'video_player'}
          ref={c => {
            this.player = c;
          }}
          autoPlay = {false}
          playsInline = {true}
          src={url}
        >

          <ControlBar autoHide={false}>
            <ReplayControl seconds={10} order={1.1} />
            <ForwardControl seconds={10} order={1.1} />
            <PlayToggle />
            <CurrentTimeDisplay order={4.1} />
            <TimeDivider order={4.2} />
            <PlaybackRateMenuButton rates={[3.0, 2.0, 1.5, 1.25, 1.0, 0.75]} order={7.1} />
            <VolumeMenuButton />
          </ControlBar>
        </Player>
      </div>
    );
  }
}

export default Video;